<template>
  <div class="main">
    <div class="outerDiv">
      <scroller lock-x>
        <div>
          <headerBack v-show="showBack"></headerBack>
          <div class="headerImage">升学规划</div>
          <div class="content">
            <div class="discreibe">选择比努力更重要，对学生最重要的是方向，只有方向正确，努力才是有意义和价值的！而如何做好选择、把握方向就是高中升学规划教育的核心内容。升学规划教育，涉及到高中学习、生涯、高考等各个方面的内容，包括生涯规划、选科选课、升学路径、学业规划、大学专业认知、研学旅行、志愿填报等一系列课程教育及实践。</div>
            <div class="flow">
              <div class="line_1">本流程主要分为以下三步：</div>
              <div class="line_2">
                <img class="circle" src="~/static/sxPlan/icon_01.png" alt="">
                <img class="line" src="~/static/sxPlan/select courses_pic_arrow.png" alt="">
                <img class="circle" src="~/static/sxPlan/icon_02.png" alt="">
                <img class="line" src="~/static/sxPlan/select courses_pic_arrow.png" alt="">
                <img class="circle" src="~/static/sxPlan/icon_03.png" alt="">
              </div>
              <div class="line_3">
                <div class="flowName">规划设置</div>
                <div class="flowName">生成一次规划结果</div>
                <div class="flowName">查看历史规划</div>
              </div>
            </div>
            <div class="startPlan" @click="handleChoNewOrOld">立即开始</div>
          </div>
          <div style="width: 100%; height: 2rem;"></div>
        </div>
      </scroller>
    </div>
 <!--   <div class="outerDiv" v-else>
      <div class="default_page">
        <img src="~/static/sxPlan/tree.png" alt="">
        <span>该服务将于 10 月份正式服务敬请期待哟~</span>
      </div>
    </div> -->
    <div v-transfer-dom>
      <popup v-model="showPopup" position="bottom">
        <div class="popupBoxWrap">
          <span class="title flex-h">
            <b class="flex1">选择版本</b>
            <i class="imgIcon" @click="showPopup=false"></i>
          </span>
          <span class="popupBoxs" @click="handleIntoPlanList('old')">
            <b>老高考版</b>
            <i>适合与通过文理选科模式下的志愿填报策略</i>
          </span>
          <span class="popupBoxs popup2" @click="handleIntoPlanList('new')">
            <b>新高考版</b>
            <i>适合于7选3、6选3、以及3+1+2选科模式下的志愿填报策略</i>
          </span>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import ls from "store2";
import { addGrade,saveProvince, getDetails } from "~/api/colleges";
import headerBack from '~/components/headerBack'
import { getUserInfoById } from "~/api/identity";
import { TransferDom, Popup } from "vux";
export default {
   directives: {
    TransferDom
  },
  components: {
    Popup,
    headerBack
  },
  data() {
    return {
      showBack:false,
      hasData: true,
      showPopup: false,
      nowDate: new Date(),
      userGrade: '',
      hasNoFinishData: false,
      choProvince: '',
    }
  },
  created(){
    if(this.commonJs.GetUrlParam('back')){
      this.showBack = true
    }else{
      this.showBack = false
    }
  },
  mounted() {
    this.getAppMsg()
    this.$visit(this.$route.path)
  },
  methods: {
    handleIntoPlanList(data) {
      ls.set('collegeExamType', data);
      let nowSemester = '';
      switch (this.nowDate.getMonth() + 1) {
        case 1: 
          nowSemester = '上学期';
          break;
        case 2: 
          nowSemester = '上学期';
          break;
        case 9: 
          nowSemester = '上学期';
          break;
        case 10: 
          nowSemester = '上学期';
          break;
        case 11: 
          nowSemester = '上学期';
          break;
        case 12: 
          nowSemester = '上学期';
          break;
        default:
          nowSemester = '下学期'  
      }
      const addParams = {
        grade: this.userGrade,
        userType: ls.get('userType'),
        semester: nowSemester
      }
      this.$loading('open');
      addGrade(addParams).then(res => {
        saveProvince({
          province: data == 'old' ? ls.get('userArea') : '浙江',
          userType: ls.get('userType')
        }).then(res => {
          this.goto('./planList');
          this.$hideLoading();
        })
      }).catch(err => {
        this.$hideLoading();
      })
    },
    getDetails() {
      this.$loading('open');
      getDetails({ userType: ls.get('userType') }).then(res => {
        if (res.data) {
          this.hasNoFinishData = true
          this.choProvince = res.data.province
        } else {
          this.hasNoFinishData = false
        }
      }).finally(() => {
        this.$hideLoading();
      })
    },
    // 选择新老高考版本
    handleChoNewOrOld() {
      if (!this.hasNoFinishData) {
        this.showPopup = true
      } else {
        if (this.choProvince == '浙江') {
          ls.set('collegeExamType', 'new');
        } else {
          ls.set('collegeExamType', 'old');
        }
        this.goto('./planList')
      }
    },
    getUserInfo() {
      getUserInfoById({ uid: ls.get('yxkData').userVoId }).then(res => {
        this.userGrade = res.data.grade
        this.getDetails()
      })
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    // 获取app信息
    getAppMsg() {
      // let token = "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhcHAxNzQ1NzE0IiwidXNlcklkIjoiMTc0NTcxNCIsImZyb20iOiJhcHAiLCJuYmYiOjE1Njc2NDY3MzF9.tNLyMBG-kMw65WKeeCDD6do2vhefGRZR9CgPgYWJDMdjATQq1HCPMf_0EMMuVtPmqVUAMHoGFR-xPdUGUQX-aE2I7JCX4prAenxOeXhTGfT7Fn8NG9T3hnw96o5OJKcbKPSMrzumidMH392M1RPIL_z451bqB5sGrpy0_7vpyzY"
      if (this.checkTerminal() === "ios") {
        let iOSInfos = window.iOSInfo;
        if (Object.keys(iOSInfos).length > 0) {
          ls.set("userType", iOSInfos.userType);
          ls.set("tokensyxk", iOSInfos.tokens);
          ls.set("userArea", iOSInfos.userArea);
          ls.set("yxkData", iOSInfos);
          ls.set('userId', iOSInfos.userId)
          this.getUserInfo()
        }
      } else if (this.checkTerminal() === "android") {
        let data = window.ZMParentsJsToAndroid.getZyMsg();
        let androidData = JSON.parse(data);      
        if (androidData.userType) {                   
          ls.set("userType", androidData.userType);
          ls.set("tokensyxk", androidData.tokens);
          ls.set("userArea", androidData.userArea);
          ls.set("yxkData", androidData);
          ls.set('userId', androidData.userId)
          this.getUserInfo()
        }
      } else {
         this.getUserInfo()
        //  ls.set("tokensyxk", token);
        //do nothing
      }
    },
    checkTerminal() {
      var u = navigator.userAgent;
      var chrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/);
      var isWechat =
        u.toLowerCase().match(/MicroMessenger/i) == "micromessenger" ||
        u.match(/_SQ_/i) == "_sq_";
      var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/);
      var isiOS =
        !chrome && u.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/);
      if (isWechat) {
        return "wechat";
      } else if (isiOS) {
        return "ios";
      } else if (isAndroid) {
        return "android";
      }
    },
  }
}
</script>

<style lang="less">
.popupBoxWrap {
  width: 7.5rem;
  height: 6rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.2rem 0.2rem 0px 0px;
  padding: 0.4rem 0.3rem;
  box-sizing: border-box;

  .title {
    height: 0.8rem;
    line-height: 0.8rem;

    b {
      font-size: 0.36rem;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      vertical-align: middle;
    }

    .imgIcon {
      vertical-align: middle;
      width: 0.4rem;
      height: 0.4rem;
      display: inline-block;
      background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.7rem;
      background-size:3rem 2.4rem; 
      // float: right;
    }
  }

  .popupBoxs {
    margin-top: 0.3rem;
    width: 100%;
    height: 1.4rem;
    display: block;
    border-radius: 0.1rem;
    border: 0.02rem solid rgba(229, 232, 237, 1);
    padding: 0.3rem 0;
    box-sizing: border-box;

    b,
    i {
      display: block;
      text-align: center;
    }

    b {
      font-size: 0.3rem;
      color: rgba(34, 34, 34, 1);
      // margin-bottom: 0.1rem;
    }

    i {
      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      margin: 0 0.4rem;
    }
  }
  .popup2 {
    height: 1.8rem;
    i {
      text-align: left;
    }
  }
}
</style>

<style lang="less" scoped>
  .outerDiv {
    width: 100%;
    height: 100vh;
    background: #fff;
    .headerImage {
      width: 100%;
      height: 2.93rem;
      background: url('~/static/sxPlan/bg_shengxue.png') no-repeat center center;
      background-size: 100% 100%;
      color: #fff;
      font-size: 0.44rem;
      font-weight: bold;
      line-height: 4.2rem;
      padding-left: 1rem;
      margin-bottom: 0.32rem;
    }
    .content {
      margin: 0 0.64rem;
      .discreibe {
        color: #222;
        font-size: 0.28rem;
        line-height: 0.39rem;
        margin-bottom: 0.32rem;
      }
      .flow {
        margin-bottom: 1.75rem;
        .line_1 {
          color: #222;
          font-size: 0.26rem;
          line-height: 0.39rem;
          font-weight: bold;
          margin-bottom: 0.49rem;
        }
        .line_2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.43rem;
          padding: 0 0.3rem 0 0.04rem;
          .circle {
            width: 0.96rem;
            height: 0.96rem;
          }
          .line {
            width: 1.13rem;
            height: 0.12rem;
          }
        }
        .line_3 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .flowName {
            color: #222;
            font-size: 0.26rem;
            line-height: 0.37rem;
            font-weight: bold;
          }
        }
      }
      .startPlan {
        width: 100%;
        height: 0.88rem;
        line-height: 0.88rem;
        text-align: center;
        background: @mainColor;
        border-radius: 0.44rem;
        color: #fff;
        font-size: 0.3rem;
        font-weight: bold;
      }
    }
    .default_page {
      padding-top: 1rem;
      img{
        display: block;
        width: 6rem;
        height:5.2rem;
        margin: 0 auto 1rem;
      }
      span{
        display: block;
        height: auto;
        width: 4rem;
        font-size: 0.3rem;
        color: gray;
        margin: 0 auto;
        text-align: center;
      }
    }
  }
</style>
